<template>
	<view>
		<view class="field-list">
			<view class="field-item" v-if="pushZoneId!=null">
				<text>{{$t('operate.zoneType')}}</text>  <!--专区类型-->
				<view class="right">{{$t('operate.platformRecommendation')}}</view>  <!--平台推荐-->
			</view>
			<view class="field-item">
				<text>{{$t('operate.startAndEndTime')}}</text>  <!--起止时间-->
				<view class="right" @click="openPopup">
					<view v-if="endTime==''" class="notEntered">{{$t('publicLang.pleaseChoose')}}<text class="iconfont iconarrow-right1"></text>
					</view>
					<view v-else>{{startTime}}——{{endTime}}</view>
				</view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.sectionTitle')}}</text><!--专区标题-->
				<view class="right"><input :disabled="pushZoneId!=null" maxlength="20" v-model="tableFrom.name" :placeholder="$t('operate.pleaseEnterSectionTitle')"
						placeholder-class="placeholderClass"></view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.zoneSubtitle')}}</text><!--专区副标题-->
				<view class="right"><input :disabled="pushZoneId!=null" v-model="tableFrom.subName"
						:placeholder="$t('operate.pleaseEnterSubtitleOfTheSection')" maxlength="20" placeholder-class="placeholderClass"></view>
			</view>
			<view class="field-item" v-if="tableFrom.id!=null">
				<text>{{$t('operate.creationTime')}}</text><!--创建时间-->
				<view class="right">{{createTime}}</view>
			</view>
			<view class="field-item" v-if="tableFrom.id!=null">
				<text>{{$t('operate.commodity')}}</text><!--商品-->
				<view class="right" @click="handleLookGoods">
					{{$t('operate.check')}}<text class="iconfont iconarrow-right1"></text>
				</view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.sort')}}</text><!--排序-->
				<view class="right">
					<view class="carnum acea-row row-left">
						<view class="item reduce" :class="tableFrom.sort<=0 ? 'on' : ''" @click="ChangeCartNum(false)">
							<text class="iconfont iconjianhao"></text>
						</view>
						<view class='item num'>
							<input type="number" maxlength="5" data-name="productSelect.cart_num"
								:value="tableFrom.sort" @input="bindCode" @blur="bindBlur"></input>
						</view>
						<view class='item plus' :class='false? "on":""' @click='ChangeCartNum(true)'>+</view>
					</view>
				</view>
			</view>
			<view class="field-item">
				<text>{{$t('operate.navigationBarDisplay')}}</text><!--导航栏显示-->
				<view class="right">
					<u-switch v-model="tableFrom.isAppBar" size="40" active-color="#000000"></u-switch>
				</view>
			</view>
			<view class="field-item1">
				<text>{{$t('operate.areaBannerMap')}}</text><!--专区banner图-->
				<view class="right" style="margin: 20rpx 0;">
					<view class="notEntered">
						<u-upload v-if="pushZoneId==null" :action="action" ref='upload' :header="headers"
							@on-success="(res)=> uploadImg(res, 0)" @on-remove="(index)=>deletePic(index,0)"
							name="multipart" :max-count="9" :show-progress="false" :custom-btn="true" width="80"
							height="80" :before-upload="beforeUpload" :file-list="fileListImg">
							
							<view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
								<u-icon name="plus" size="48" color="#c0c4cc"></u-icon>
								<!-- 请上传banner图<text class="iconfont iconarrow-right1"></text> -->
							</view>
						</u-upload>
						<view v-else>
							<image v-for="(item,index) in tableFrom.image" :key="index" :src="item" style="width: 76rpx;height: 76rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tips">
			{{$t('operate.imageSizeTips')}}
		</view>
		<view class="bottomBox" :style="{paddingBottom: `${bottomLift}px`}">
			<view class="button">
				<view v-if="tableFrom.id!=null&&pushZoneId==null" class="del-button" @click="delClick">{{$t('publicLang.delete')}}</view>
				<view class="add-button" @click="addClick">{{$t('publicLang.save')}}</view>
			</view>
		</view>
		<lb-picker ref="startPicker" v-model="date" :cancelText="$t('publicLang.cancel')" :confirmText="$t('publicLang.sure')" mode="dateSelector" format="YYYY-MM-DD" display-format="YYYY-MM-DD"
			@confirm="handleConfirm">
			<view slot="action-center">{{$t('operate.startDate')}}</view>
		</lb-picker>
		<lb-picker ref="endPicker" v-model="date" :cancelText="$t('publicLang.cancel')" :confirmText="$t('publicLang.sure')" :start-date="startTime" mode="dateSelector" format="YYYY-MM-DD" display-format="YYYY-MM-DD"
			@confirm="handleConfirmEnd">
			<view slot="action-center">{{$t('operate.endDate')}}</view>
		</lb-picker>
	</view>
</template>

<script>
	let app = getApp();
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REQUEST_URL,
		TOKENNAME
	} from "@/config/app";
	import {
		formatTimes,
		formatTime
	} from "@/utils/common.js";
	import {
		zoneUpdate,
		zoneAdd
	} from '@/api/store.js';
	export default {
		data() {
			return {
				value: 0,
				checked: false,
				date: (formatTimes(new Date())).toString(),
				action: "",
				headers: "",
				fileListImg: [],
				tableFrom: {
					sort: 0,
					name: "",
					subName: "",
					image: [],
					// status: 1,
					isAppBar: 1,
					startTime: '',
					endTime: '',
				},
				createTime: '',
				startTime: '',
				endTime: '',
				pushZoneId: null,
				bottomLift: app.globalData.bottomLift,
			}
		},
		computed: mapGetters(["token"]),
		onLoad(options) {
			this.action = `${HTTP_REQUEST_URL}api/admin/upload/oss/image?model=content&pid=0`;
			this.headers = {
				[TOKENNAME]: this.token,
			};
			const eventChannel = this.getOpenerEventChannel();
			let that = this
			eventChannel.on('special_area_data', function(data) {
				that.tableFrom.sort = data.data.sort
				that.tableFrom.name = data.data.name
				that.tableFrom.subName = data.data.subName
				that.$set(that.tableFrom, "id", data.data.id)
				that.tableFrom.isAppBar = data.data.isAppBar
				if (data.data.startTime){
					that.startTime = data.data.startTime.split(" ")[0]
				}
				if (data.data.endTime){
					that.endTime = data.data.endTime.split(" ")[0]
				}
				that.createTime = data.data.createTime
				that.pushZoneId = data.data.pushZoneId
				let image = JSON.parse(data.data.image)
				that.tableFrom.image = image
				image.map((item) => {
					that.fileListImg.push({
						url: item
					});
				});
			})
			console.log(options.id)
			if (options.id) {
				uni.setNavigationBarTitle({
					title: this.$t('navigation.editArea')  //编辑专区
				})
			} else {
				uni.setNavigationBarTitle({
					title: this.$t('navigation.addANewArea')  //新增专区
				})
			}

		},
		methods: {
			ChangeCartNum: function(changeValue) {
				if (changeValue) {
					this.tableFrom.sort = this.tableFrom.sort + 1
				} else {
					if (this.tableFrom.sort == 0) {
						return
					}
					this.tableFrom.sort = this.tableFrom.sort - 1
				}
			},
			// 手动输入数量
			bindCode: function(e) {
				this.$set(this, 'value', e.detail.value);
			},
			bindBlur() {
				this.value = isNaN(Number(this.value)) ? 0 : Number(this.value)
			},
			openPopup() {
				if (this.pushZoneId != null) {
					return
				}
				this.$refs.startPicker.show()
			},
			handleConfirm(e) {
				this.startTime = e.value
				this.$nextTick(function() {
					this.$refs.endPicker.show()
				})
			},
			handleConfirmEnd(e) {
				this.endTime = e.value
			},
			uploadImg(res, type, index) {
				this.tableFrom.image.push(res.data.url)
			},
			deletePic(index, type, index1) {
				var arr = this.tableFrom.image;
				arr.splice(index,1);
				this.tableFrom.image = arr
			},
			delClick(){
				let _this = this
				uni.showModal({
				    title: this.$t('publicLang.hint'),
				    content: this.$t('operate.deleteSection'),
					cancelText:_this.$t('publicLang.cancel'),
					confirmText: _this.$t('publicLang.sure'),
				    success: function (res) {
				        if (res.confirm) {
				            zoneUpdate({ id: _this.tableFrom.id, isDel: 1 }).then((res) => {
				            	_this.$util.Tips({
				            		title: _this.$t('operate.successfullyDeleted')
				            	});
				            	setTimeout(function() {
									const eventChannel = _this.getOpenerEventChannel();
				            		eventChannel.emit('someEvent', {
				            			data: ''
				            		});
				            		uni.navigateBack()
				            	}, 1500);
				            }).catch((e) => {
				            	console.info(e)
				            })
				        }
				    }
				});
				
			},
			async addClick() {
				let that = this
				console.info(this.tableFrom)
				if (!this.endTime) {
					return uni.showToast({
						title: this.$t('operate.pleaseSelectStartAndEndTime'),
						icon: "none"
					})
				}
				if (!this.tableFrom.name) {
					return uni.showToast({
						title: this.$t('operate.pleaseEnterATitle'),
						icon: "none"
					})
				}
				if (!this.tableFrom.subName) {
					return uni.showToast({
						title: this.$t('operate.pleaseEnterASubtitle'),
						icon: "none"
					})
				}
				// await this.jiaoyan()
				console.info(111)
				var data = {
					startTime:this.startTime + ' 00:00:00',
					endTime:this.endTime + ' 23:59:59',
					image:JSON.stringify(this.tableFrom.image),
					isAppBar:this.tableFrom.isAppBar?1:0,
					sort:this.tableFrom.sort,
					name:this.tableFrom.name,
					subName:this.tableFrom.subName,
					id:this.tableFrom.id,
				}
				if (data.id== null ||data.id == "undefined") {
					delete data.id;
				}
				const eventChannel = that.getOpenerEventChannel();
				this.tableFrom.id ?
					zoneUpdate(data).then((res) => {
						that.$util.Tips({
							title: that.$t('operate.editedSuccessfully')
						});
						setTimeout(function() {

							eventChannel.emit('someEvent', {
								data: ''
							});
							uni.navigateBack()
						}, 1500);
					}).catch((e) => {
						console.info(e)
					}) :
					zoneAdd(data).then((res) => {
						that.$util.Tips({
							title: that.$t('operate.addedSuccessfully')
						});
						setTimeout(function() {
							eventChannel.emit('someEvent', {
								data: ''
							});
							uni.navigateBack()
						}, 1500);
					}).catch((e) => {
						console.info(e)
					});

			},
			// jiaoyan() {
			// 	return new Promise((resolve, reject) => {
			// 		let count = 0
			// 		console.info(this.tableFrom.image)
			// 		this.tableFrom.image.map((ret, idx) => {
			// 			this.getImg(ret).then((ret2) => {
			// 				const image = ret2;
			// 				console.info(image)
			// 				count = count+1
			// 				if (!(image.width == 750 && image.height <= 600)) {
			// 					reject()
			// 					return uni.showToast({
			// 						title: "图片尺寸为：宽度750px，高度不超过600px",
			// 						icon: "none"
			// 					})
			// 				}else{
			// 					console.info(count,this.tableFrom.image.length)
			// 					if(count==this.tableFrom.image.length){
			// 						resolve()
			// 					}
			// 				}
			// 			});
			// 		});
			// 	})
			// },
			// async getImg(data) {
			// 	let img = await this.utils(data);
			// 	return img;
			// },
			// utils(data) {
			// 	console.log(data);
			// 	return new Promise((resolve, reject) => {
			// 		uni.getImageInfo({
			// 			src: data,
			// 			success: function(image) {
			// 				resolve(image);
			// 			}
			// 		});
			// 	});
			// },
			handleLookGoods() {
				uni.navigateTo({
					url: `../zhuanqu_goods/index?zoneId=${this.tableFrom.id}&pushZoneId=${this.pushZoneId}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.field-list {
		background-color: #FFFFFF;
		.field-item1{
			color: #666666;
			padding: 0 40rpx;
			border-bottom: 1rpx solid #F5F5F8;
			.slot-btn {
				width: 70rpx;
				height: 70rpx;
				text-align: center;
				line-height: 70rpx;
				border: 1rpx solid #c7c7cc;
			}
			.right ::v-deep .u-delete-icon {
				width: 30rpx;
				height: 30rpx;
				top: 0rpx;
				right: 0rpx;
			}
		}
		.field-item {
			color: #666666;
			height: 108rpx;
			padding: 0 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1rpx solid #F5F5F8;

			.right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				flex: 1;
				text-align: right;
				margin-left: 20rpx;

				.carnum {
					height: 54rpx;
				}

				.carnum .reduce {
					border-right: 0;
					line-height: 40rpx;
				}

				.carnum .reduce.on {
					border-color: #e3e3e3;
					color: #dedede;
				}

				.carnum .plus {
					border-left: 0;
					line-height: 40rpx;
				}

				.carnum .plus.on {
					border-color: #e3e3e3;
					color: #dedede;
				}

				.carnum .num {
					color: #282828;
					font-size: 28rpx;
				}

				.carnum .reduce .iconfont,
				.carnum .plus .iconfont {
					font-size: 14rpx;
				}

				.carnum view {
					border: 1px solid #a4a4a4;
					width: 52rpx;
					text-align: center;
					height: 100%;
					line-height: 54rpx;
					color: #222222;
					font-size: 25rpx;
				}

				.notEntered {
					color: #BBBBBB;
				}
				
				.iconfont {
					font-size: 20rpx;
				}

				.placeholderClass {
					color: #BBBBBB;
				}

				input {
					width: 100%
				}
			}
		}
	}

	.tips {
		margin: 30rpx 40rpx;
		color: #BBBBBB;
		font-size: 20rpx;
	}

	.bottomBox {
		background-color: #FFFFFF;
		width: 100%;
		position: fixed;
		bottom: 0;
		padding:0 30rpx;
	}

	.button {
		width: 100%;
		height: 128rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		
	}

	.add-button {
		width: 100%;
		height: 92rpx;
		background-color: #111111;
		color: #FFFFFF;
		font-size: 32rpx;
		text-align: center;
		line-height: 92rpx;
		
	}
	.del-button{
		width: 100%;
		height: 92rpx;
		font-size: 32rpx;
		text-align: center;
		line-height: 92rpx;
		border: 1rpx solid #000000;
		margin-right: 70rpx;
	}
</style>
